id | title | description | video |
---|---|---|---|
auth-captcha |
Enable Captcha Protection |
Add Captcha Protection to your Supabase project |
Supabase provides you with the option of adding captcha to your sign-in, sign-up, and password reset forms. This keeps your website safe from bots and malicious scripts. Supabase authentication has support for hCaptcha and Cloudflare Turnstile.
<Tabs scrollable size="small" type="underlined" defaultActiveId="hcaptcha-1" queryGroup="captcha-method"
Go to the [hCaptcha](https://www.hcaptcha.com/) website and sign up for an account. On the Welcome page, copy the **Sitekey** and **Secret key**.
If you have already signed up and didn't copy this information from the Welcome page, you can get the Secret key from the Settings page.
The Sitekey can be found in the Settings of the active site you created.
In the Settings page, look for the Sitekey section and copy the key.
Go to the [Cloudflare website](https://dash.cloudflare.com/login) and sign up for an account. On the Welcome page, head to the Turnstile section and add a new site. Create a site and take note of the **Sitekey** and **Secret Key** as shown below ![cloudflare_settings.png](/docs/img/guides/auth-captcha/cloudflare_settings.png)Navigate to the Auth section of your Project Settings in the Supabase Dashboard and find the Enable Captcha protection toggle under Settings > Authentication > Bot and Abuse Protection > Enable Captcha protection.
Select your CAPTCHA provider from the dropdown, enter your Captcha Secret key, and click Save.
The frontend requires some changes to provide the captcha on-screen for the user. This example uses React and the corresponding Captcha React component, but both Captcha providers can be used with any JavaScript framework.
<Tabs scrollable size="small" type="underlined" defaultActiveId="hcaptcha-2" queryGroup="captcha-method"
Install @hcaptcha/react-hcaptcha
in your project as a dependency.
npm install @hcaptcha/react-hcaptcha
Now import the HCaptcha
component from the @hcaptcha/react-hcaptcha
library.
import HCaptcha from '@hcaptcha/react-hcaptcha'
Let's create a empty state to store our captchaToken
const [captchaToken, setCaptchaToken] = useState()
Now lets add the HCaptcha component to the JSX section of our code
<HCaptcha />
We will pass it the sitekey we copied from the hCaptcha website as a property along with a onVerify property which takes a callback function. This callback function will have a token as one of its properties. Let's set the token in the state using setCaptchaToken
<HCaptcha
sitekey="your-sitekey"
onVerify={(token) => {
setCaptchaToken(token)
}}
/>
Now lets use the captcha token we receive in our Supabase signUp function.
await supabase.auth.signUp({
email,
password,
options: { captchaToken },
})
We will also need to reset the captcha challenge after we have made a call to the function above.
Create a ref to use on our HCaptcha component.
const captcha = useRef()
Let's add a ref attribute on the HCaptcha
component and assign the captcha
constant to it.
<HCaptcha
ref={captcha}
sitekey="your-sitekey"
onVerify={(token) => {
setCaptchaToken(token)
}}
/>
Reset the captcha
after the signUp function is called using the following code:
captcha.current.resetCaptcha()
In order to test that this works locally we will need to use something like ngrok or add an entry to your hosts file. You can read more about this in the hCaptcha docs.
The frontend requires some changes to provide the captcha on-screen for the user. Turnstile can be used with any JavaScript framework but we'll use React and the Turnstile React component for this example.
Install @marsidev/react-turnstile in your project as a dependency.
npm install @marsidev/react-turnstile
Now import the Turnstile component from the @marsidev/react-turnstile library.
import { Turnstile } from '@marsidev/react-turnstile'
Let's create an empty state to store our captchaToken
const [captchaToken, setCaptchaToken] = useState()
Now lets add the Cloudflare Turnstile component to the JSX section of our code:
<Turnstile />
We will pass it the sitekey we copied from the Cloudflare website as a property along with a onSuccess
property which takes a callback function. This callback function will have a token as one of its properties. Let's set the token in the state using setCaptchaToken
:
<Turnstile
siteKey="your-sitekey"
onSuccess={(token) => {
setCaptchaToken(token)
}}
/>
We can now use the captchaToken
we receive in our Supabase signUp
function.
await supabase.auth.signUp({
email,
password,
options: { captchaToken },
})
To test locally, you will need to add localhost to the domain whitelist as per the Cloudflare docs
</TabPanel>
</Tabs>
Run the application and you should now be provided with a captcha challenge.